<template>
  <div class="page-main">
    <query-page
      ref="queryPageRef"
      v-model:selectedKeys="selectedKeys"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="tableRenderConfig"
      :table-render-keys="tableRenderKeys"
      :loading="isLoading"
      :data="renderData"
      :total="tableTotal"
      title="采购到货明细登记"
      :has-line="false"
      @selection-change="selectionChange"
      @query-data="getData"
    >
      <template #top-container>
        <p-tabs
          v-model:value="activeTab"
          :is-show-num="false"
          :tab-list="tabList"
        ></p-tabs>
      </template>
      <template #operate="{ record, rowIndex }">
        <a-button type="text" @click="detailLeft(record, rowIndex)"
          >详情</a-button
        >
        <a-button
          v-permission="['pms:receive-check:receiveCheckSave']"
          type="text"
          :loading="saveRowLoading"
          :hidden="Number(record.batchFlag) === 1"
          @click="saveRow(record, rowIndex)"
          >登记确认</a-button
        >
      </template>
    </query-page>
    <DetailModal
      v-if="detailModelVisible"
      v-model="detailModelVisible"
      :select-id="selectedId"
      :active-tab="activeTab"
    ></DetailModal>
  </div>
</template>

<script lang="ts" setup>
  import {
    ref,
    watch,
    defineAsyncComponent,
    computed,
    provide,
    reactive,
    nextTick,
  } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import {
    getPmsReceiveDetailPage,
    receiveCheckSave,
  } from '@/api/purchaseArrival/arrivalRegistration';
  import { info } from '@/common/utils/modal-promise';
  import { materialType } from '@/config/const';
  import { Message } from '@arco-design/web-vue';
  import {
    tableRenderConfig,
    tableComponentConfig,
  } from '../moduleCommon/tableComp/baseTableConfig';
  import {
    formComponentConfig,
    formRenderConfig,
  } from '../moduleCommon/formComp/baseFormConfig';
  import { baseRenderKeys } from './baseData';
  import PTabs from '../moduleCommon/p-tabs.vue';

  const DetailModal = defineAsyncComponent(() => import('./DetailModal.vue'));
  const tabList = ref(materialType);

  const selectedKeys = ref([]);
  const queryPageRef = ref(null);
  const selectedId = ref(null);
  const activeTab = ref('2');
  const isLoading = ref(true);
  const tableTotal = ref(0);
  const renderData = ref<any[]>([]);
  const saveRowLoading = ref<boolean>(false);
  // 渲染检索项
  const formRenderKeys = ref<any[]>([]);
  // 当前表格要渲染哪些值
  const tableRenderKeys = ref<any[]>([]);

  interface Tst {
    [index: string]: any;
  }
  const detailModelVisible = ref(false);
  const dataRenderBase = ref<Tst>({
    '1': baseRenderKeys.standardPart.formRenderKeys,

    '2': baseRenderKeys.finishedProduct.formRenderKeys,

    '3': baseRenderKeys.rawMaterial.formRenderKeys,

    '4': baseRenderKeys.zeroCom.formRenderKeys,

    '5': baseRenderKeys.forgingAndCasting.formRenderKeys,
  });
  const tableRenderBase = ref<Tst>({
    '1': baseRenderKeys.standardPart.newTableRenderKeys,

    '2': baseRenderKeys.finishedProduct.newTableRenderKeys,

    '3': baseRenderKeys.rawMaterial.newTableRenderKeys,

    '4': baseRenderKeys.zeroCom.newTableRenderKeys,

    '5': baseRenderKeys.forgingAndCasting.newTableRenderKeys,
  });
  // 获取筛选form的renderKey(表单渲染项)
  formRenderKeys.value = dataRenderBase.value[activeTab.value];
  const selectionChange = (val: string[]) => {
    console.log('selectedKeys', val);
  };
  const getData = async (queryInfo: object) => {
    if (!queryInfo) {
      queryInfo = queryPageRef.value.getStatus();
    }
    queryInfo.mdsItemType = activeTab?.value;
    renderData.value = [];
    isLoading.value = true;
    const { data } = await getPmsReceiveDetailPage(queryInfo);
    renderData.value = data.list;
    tableTotal.value = data.total;
    isLoading.value = false;
  };
  let selectBatchRow = reactive({});
  provide(
    'selectBatchRow',
    computed(() => {
      return selectBatchRow;
    })
  );
  const detailLeft = (row) => {
    selectBatchRow = Object.assign(selectBatchRow, row);
    selectedId.value = row.id;
    detailModelVisible.value = true;
  };
  // 初期话
  const initData = () => {
    // 获取筛选form的renderKey(表单渲染项)
    formRenderKeys.value = dataRenderBase.value[activeTab.value];
    tableRenderKeys.value = tableRenderBase.value[activeTab.value];
  };
  const saveRow = async (row) => {
    await info({
      title: '登记确认',
      content: '您确定要登记确认当前所选的数据？',
      okText: '确认',
    });
    try {
      saveRowLoading.value = true;
      // const { id } = row;
      await receiveCheckSave(row);
      Message.success({
        content: '确认成功！',
        duration: 5 * 1000,
      });
      getData();
    } finally {
      saveRowLoading.value = false;
    }
  };
  watch(
    () => activeTab.value,
    () => {
      initData();
      selectedKeys.value = [];
      nextTick(() => {
        getData();
      });
    }
  );

  const init = () => {
    initData();
  };
  init();
</script>

<style lang="less" scoped>
  @import url('../moduleCommon/common.less');
</style>
